<template>
  <div :class="['knt-table', ...className]">
    <div class="knt-table-main">
      <el-table
        ref="table"
        v-bind="$props"
        style="width: 100%"
        @select="select"
        @selection-change="selectionChange"
        @select-all="selectAll"
        @cell-mouse-enter="cellMouseEnter"
        @cell-mouse-leave="cellMouseLeave"
        @cell-click="cellClick"
        @row-click="rowClick"
        @row-contextmenu="rowContextmenu"
        @row-dblclick="rowDblclick"
        @header-click="headerClick"
        @header-contextmenu="headerContextmenu"
        @sort-change="sortChange"
        @filter-change="filterChange"
        @current-change="currentRowChange"
        @header-dragend="headerDragend"
        @expand-change="expandChange"
      >
        <slot />
        <div slot="empty">
          <el-empty :description="description"></el-empty>
        </div>
      </el-table>
    </div>
    <div v-if="showPagination" class="paginationBox">
      <el-pagination
        background
        v-bind="$props"
        :layout="layout"
        @size-change="sizeChange"
        @current-change="currentPageChange"
        @prev-click="prevClick"
        @next-click="nextClick"
      />
    </div>
  </div>
</template>

<script>
import { Table, Pagination } from 'element-ui';

const tableProps = { ...Table.props };
const paginationProps = { ...Pagination.props };
export default {
  name: 'Table',
  components: {
    'el-table': Table,
    'el-pagination': Pagination
  },
  props: {
    ...tableProps, // 继承el-table的props
    ...paginationProps, // 继承el-pagination的props
    className: {
      type: Array,
      default() {
        return ['medium'];
      }
    },
    showPagination: {
      type: Boolean,
      default() {
        return true;
      }
    },
    layout: {
      type: String,
      default() {
        return 'prev, pager, next, jumper, ->, total';
      }
    },
    description: {
      type: String,
      default: '暂无数据'
    }
  },
  methods: {
    toggleRowSelection(row, selected) {
      if (selected) {
        this.$refs.table.toggleRowSelection(row, true);
      } else {
        this.$refs.table.toggleRowSelection(row);
      }
    },
    clearSelection(row) {
      this.$refs.table.clearSelection(row);
    },
    toggleAllSelection() {
      this.$refs.table.toggleAllSelection();
    },
    toggleRowExpansion(row, expanded) {
      if (expanded) {
        this.$refs.table.toggleRowExpansion(row, true);
      } else {
        this.$refs.table.toggleRowExpansion(row);
      }
    },
    setCurrentRow(row) {
      this.$refs.table.setCurrentRow(row);
    },
    clearSort() {
      this.$refs.table.clearSort();
    },
    clearFilter(columnKey) {
      this.$refs.table.clearFilter(columnKey);
    },
    doLayout() {
      this.$refs.table.doLayout();
    },
    sort(prop, order) {
      this.$refs.table.sort(prop, order);
    },
    select(selection, row) {
      this.$emit('select', selection, row);
    },
    selectAll(selection) {
      this.$emit('selection-all', selection);
    },
    selectionChange(selection) {
      this.$emit('selection-change', selection);
    },
    cellMouseEnter(row, column, cell, event) {
      this.$emit('cell-mouse-enter', row, column, cell, event);
    },
    cellMouseLeave(row, column, cell, event) {
      this.$emit('cell-mouse-leave', row, column, cell, event);
    },
    cellClick(row, column, cell, event) {
      this.$emit('cell-click', row, column, cell, event);
    },
    rowClick(row, column, event) {
      this.$emit('row-click', row, column, event);
    },
    rowContextmenu(row, column, event) {
      this.$emit('row-contextmenu', row, column, event);
    },
    rowDblclick(row, column, event) {
      this.$emit('row-dblclick', row, column, event);
    },
    headerClick(column, event) {
      this.$emit('header-click', column, event);
    },
    headerContextmenu(column, event) {
      this.$emit('header-contextmenu', column, event);
    },
    sortChange({ column, prop, order }) {
      this.$emit('sort-change', { column, prop, order });
    },
    filterChange(filters) {
      this.$emit('filter-change', filters);
    },
    currentRowChange(currentRow, oldCurrentRow) {
      this.$emit('current-row-change', currentRow, oldCurrentRow);
    },
    headerDragend(newWidth, oldWidth, column, event) {
      this.$emit('header-dragend', newWidth, oldWidth, column, event);
    },
    expandChange(row, expanded) {
      this.$emit('expand-change', row, expanded);
    },
    sizeChange(pages) {
      this.$emit('size-change', pages);
    },
    currentPageChange(page) {
      this.$emit('current-page-change', page);
    },
    prevClick(page) {
      this.$emit('prev-click', page);
    },
    nextClick(page) {
      this.$emit('next-click', page);
    }
  }
};
</script>

<style lang="scss" scoped>
.knt-table {
  width: 100%;
  &-main {
    padding: 20px;
    border-radius: 4px;
    background: white;
  }
  ::v-deep .el-table th {
    color: #7f8fa4 !important;
    font-weight: inherit !important;
    border-bottom: 1px solid #e6eaef !important;
  }
  ::v-deep .el-table {
    .el-table__empty-block {
      width: 100% !important;
    }
    .el-table__header-wrapper table,
    .el-table__body-wrapper table {
      width: 100% !important;
    }
    .el-table__body,
    .el-table__footer,
    .el-table__header {
      table-layout: auto;
    }
    &::before {
      height: 0;
    }
    th {
      font-weight: bold;
      font-size: 14px;
      border-bottom-color: transparent;
      color: #5c6268 !important;
      background-color: white;
      font-weight: inherit !important;
      border-bottom: 1px solid #e6eaef !important;
    }
    th,
    td {
      padding: 0;
    }
    .el-checkbox {
      margin: 0;
    }
    .cell {
      padding: 0 10px;
      height: 44px;
      line-height: 44px;
      font-size: 14px;
    }
  }

  &.medium {
    ::v-deep .el-table .cell {
      height: 44px;
      line-height: 44px;
    }
  }
  &.small {
    ::v-deep .el-table .cell {
      height: 39px;
      line-height: 39px;
    }
  }
  &.mini {
    ::v-deep .el-table .cell {
      height: 29px;
      line-height: 29px;
    }
    ::v-deep .el-table .caret-wrapper {
      height: 30px;
    }
    ::v-deep .el-table .sort-caret.ascending {
      top: 3px;
    }
    ::v-deep .el-table .sort-caret.descending {
      bottom: 3px;
    }
    ::v-deep .el-table tr {
      font-size: 12px;
    }
  }
  .paginationBox {
    margin-top: 16px;
    ::v-deep .el-pagination button,
    ::v-deep .el-pagination span:not([class*='suffix']),
    ::v-deep .el-pagination__sizes .el-input .el-input__inner {
      font-size: 14px;
    }
    ::v-deep .el-pagination {
      background: transparent;
    }
    ::v-deep .el-pagination__jump {
      margin-left: 0 !important;
      background: transparent !important;
    }
    ::v-deep .el-pagination .btn-next,
    ::v-deep .el-pagination button:disabled,
    ::v-deep .el-pagination .btn-prev,
    ::v-deep .el-pager li {
      background: transparent;
      font-size: 14px;
    }
    ::v-deep .el-input__inner {
      background: transparent !important;
    }
  }
}
</style>
